<template>
  <view class="celebrity-page">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <wd-search v-model="searchKeyword" placeholder="搜索名人" @search="handleSearch" />
    </view>

    <!-- 名人分类 -->
    <view class="category-tabs">
      <view
        v-for="(category, index) in categories"
        :key="index"
        class="tab-item"
        :class="{ active: currentCategory === category.value }"
        @click="switchCategory(category.value)"
      >
        {{ category.label }}
      </view>
    </view>

    <!-- 名人列表 -->
    <view class="celebrity-list">
      <view
        v-for="(celebrity, index) in filteredCelebrities"
        :key="index"
        class="celebrity-item"
        @click="viewCelebrityDetail(celebrity)"
      >
        <image
          class="celebrity-avatar"
          :src="celebrity.avatar || 'https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg'"
          mode="aspectFill"
        />
        <view class="celebrity-info">
          <view class="celebrity-name">{{ celebrity.name }}</view>
          <view class="celebrity-title">{{ celebrity.title }}</view>
          <view class="celebrity-desc">{{ celebrity.description }}</view>
          <view class="celebrity-meta">
            <text class="dynasty">{{ celebrity.dynasty }}</text>
            <text class="achievement">{{ celebrity.achievement }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view v-if="hasMore" class="load-more">
      <wd-loading size="small" />
      <text>加载中...</text>
    </view>
    <view v-else class="no-more">
      <text>没有更多了</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

// 搜索关键词
const searchKeyword = ref("");

// 名人分类
const categories = [
  { label: "全部", value: "all" },
  { label: "古代名人", value: "ancient" },
  { label: "近代名人", value: "modern" },
  { label: "现代名人", value: "contemporary" },
];

// 当前选中的分类
const currentCategory = ref("all");

// 名人数据
const celebrities = ref([
  {
    id: "1",
    name: "李时珍",
    title: "明代医药学家",
    description: "著有《本草纲目》，是中国古代最著名的医药学家之一。",
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
    dynasty: "明代",
    achievement: "《本草纲目》作者",
    category: "ancient",
  },
  {
    id: "2",
    name: "李白",
    title: "唐代诗人",
    description: '唐代伟大的浪漫主义诗人，被后人誉为"诗仙"。',
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
    dynasty: "唐代",
    achievement: "诗仙",
    category: "ancient",
  },
  {
    id: "3",
    name: "李四光",
    title: "地质学家",
    description: "中国现代地质学的奠基人之一，对地质学发展做出重要贡献。",
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
    dynasty: "现代",
    achievement: "地质学家",
    category: "modern",
  },
  {
    id: "4",
    name: "李政道",
    title: "物理学家",
    description: "诺贝尔物理学奖获得者，在粒子物理领域做出重要贡献。",
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
    dynasty: "现代",
    achievement: "诺贝尔奖获得者",
    category: "contemporary",
  },
]);

// 根据分类和搜索关键词筛选名人
const filteredCelebrities = computed(() => {
  let result = celebrities.value;

  // 按分类筛选
  if (currentCategory.value !== "all") {
    result = result.filter((item) => item.category === currentCategory.value);
  }

  // 按关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase();
    result = result.filter(
      (item) =>
        item.name.toLowerCase().includes(keyword) ||
        item.title.toLowerCase().includes(keyword) ||
        item.description.toLowerCase().includes(keyword)
    );
  }

  return result;
});

// 是否还有更多数据
const hasMore = ref(true);

// 切换分类
const switchCategory = (category: string) => {
  currentCategory.value = category;
};

// 搜索处理
const handleSearch = (value: string) => {
  searchKeyword.value = value;
};

// 查看名人详情
const viewCelebrityDetail = (celebrity: any) => {
  uni.navigateTo({
    url: `/pages/work/celebrity/detail?id=${celebrity.id}`,
  });
};
</script>

<style lang="scss">
.celebrity-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20rpx;
}

.search-bar {
  padding: 20rpx;
  background-color: #fff;
}

.category-tabs {
  display: flex;
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .tab-item {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 20rpx 0;
    position: relative;

    &.active {
      color: #1989fa;
      font-weight: 500;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background-color: #1989fa;
        border-radius: 2rpx;
      }
    }
  }
}

.celebrity-list {
  padding: 20rpx;

  .celebrity-item {
    display: flex;
    background-color: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;

    .celebrity-avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }

    .celebrity-info {
      flex: 1;

      .celebrity-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }

      .celebrity-title {
        font-size: 28rpx;
        color: #1989fa;
        margin-bottom: 10rpx;
      }

      .celebrity-desc {
        font-size: 26rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 10rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .celebrity-meta {
        display: flex;
        justify-content: space-between;
        font-size: 24rpx;
        color: #999;

        .dynasty {
          color: #666;
        }

        .achievement {
          color: #1989fa;
        }
      }
    }
  }
}

.load-more,
.no-more {
  text-align: center;
  padding: 30rpx 0;
  color: #999;
  font-size: 24rpx;

  .wd-loading {
    margin-right: 10rpx;
  }
}
</style>
